<template>
	<view class="comment">
		<!-- scroll-view使评论可以滑动 -->
		<scroll-view scroll-y="true" style="height: 800rpx;">
			<!-- 一级遍历 -->
			<view class="comment-item-main" v-for="(item, index) in comments" :key="item.id">
				<view class="comment-item">
					<view class="content">
						<!-- 一级评论名字 -->
						<view class="title-name">{{item.sysUser.nickName}}</view>
						<view class="content-text">
							<!-- 一级评论内容 -->
							<text>{{ item.content }}</text>
						</view>
						<view class="content-btm">
							<!-- 一级评论时间 -->
							<text>{{ item.createTime }}</text>
							<!-- 回复按钮 -->
							<text class="btm-back msgcolor" @click="replyComment(item.schoolStudent.name)">回复</text>
							<text class="btm-back msgdel" v-if="isDelete" @click="delmessage(item.id)">删除</text>
						</view>
					</view>
				</view>
				<view v-if="showReplyList.indexOf(item.id) !== -1">
					<!-- 二级评论的遍历 -->
					<view class="comment-item items" v-for="reply in item.children" :key="reply.id">

						<view class="content">
							<view class="title-name">
								<!-- 二级评论名字，谁回复谁 -->
								<view>{{ item.name }}</view>
								<view v-if="item.superNickname">@</view>
								<view v-if="item.superNickname">{{ item.schoolStudent.name }}</view>
							</view>
							<!-- 二级评论内容 -->
							<view class="content-text">
								<text>{{ item.content }}</text>
							</view>
							<!-- 二级评论时间 -->
							<view class="content-btm">
								<text>{{ item.createTime }}</text>
								<text class="btm-back" @click="replyComment(item.schoolStudent.name,item.id)">回复</text>
								<text class="btm-back" v-if="isDelete" @click="delmessage(item.id)">删除</text>
							</view>
						</view>

					</view>
				</view>
				<!-- <view class="spread" v-if="item.children.length > 0" @click="isShowReply(item.id, index)">
					<text>{{ showReplyList.indexOf(item.id) !== -1 ? '收起' : '展开' + item.children.length + '条回复' }}</text>
					<text :class="showReplyList.indexOf(item.id) !== -1 ? 'up' : 'down'"></text>
				</view> -->
				<view class="comment-item-main-1"></view>
			</view>
		</scroll-view>
		<!-- 评论输入框 -->
		<view class="comment-btm">
			<input type="text" :placeholder="placeholderComment" v-model="message" />
			<view class="sendmsg" @click="sendmessage()">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'comment',
		props: {
			sectionResourceId: '',
			comments: {
				type: Array,
			},
			nameArr: {
				type: Array,
			},
			value: '',
		},
		data() {
			return {
				courseId: '',
				parentId: '',
				message: '',
				isDelete: true,
				showReplyList: [],
				placeholderComment: '请输入评论...',
				layer: 1,
				superCommentId: null,
			};
		},
		beforeMount() {
			console.log("sectionResourceId:" + this.sectionResourceId);
			// this.$emit('is_Delete');
			
		},
		mounted() {
			this.msgDelete();
		},
		onReady(){
			console.log(this.comments)
		},
		methods: {
			// 评论区删除按钮的显示判断
			msgDelete() {
				let olename = uni.getStorageSync("username");
				console.log(olename);
				let newname = this.comments;
				console.log('dafda'+newname);
				for(let i=0;i<newname.length;i++) {
					console.log('循环输出: '+newname.content);
				}
			},
			
			// 获取课程id
			async getChapterViceList(id, courseId) {
				console.log("课程id1:" + sectionResourceId);
				let res = await this.$myRequest({
					url: '/api/mobile/schoolcoursesection/all',
					data: {
						courseId: id,
						parentId: id
					},

				})
				// console.log(courseId,parentId)
			},
			
			// 展开、收起
			isShowReply(id, index) {
				if (this.showReplyList.indexOf(id) == -1) {
					this.showReplyList.push(id);
					this.$emit('reply-click', this.book);
				} else {
					let index = this.showReplyList.indexOf(id);
					this.showReplyList.splice(index, 1);
				}
			},
			// 发送评论
			async sendmessage() {

				let that = this;
				let token = uni.getStorageSync('student_access_token');
				if (token == "" || token == null) {
					uni.showToast({
						icon: "error",
						title: "请先登录"
					})
				} else {
					const res = await that.$myRequest({
						url: '/api/mobile/schoolstudent/schoolCourseSectionResourceComment',
						method: 'POST',
						data: {
							content: this.message,
							sectionResourceId: this.sectionResourceId,
						},
					})
					console.log("评论结果：" + res)
					if (res.success) {
						this.message == null;
						location.reload();
					} else {
						uni.showToast({
							icon: "none",
							title: "评论失败"
						})
					}
				}

			},
			// 回复评论
			replyComment(name,id) {
				this.message = '回复@' + name + ": ";
				
				// let that = this;
				// let token = uni.getStorageSync('student_access_token');
				// if (token == "" || token == null) {
				// 	uni.showToast({
				// 		icon: "error",
				// 		title: "请先登录"
				// 	})
				// } else {
				// 	const res = await that.$myRequest({
				// 		url: '/api/mobile/schoolstudent/schoolCourseSectionResourceComment/save',
				// 		method: 'POST',
				// 		data: {
				// 			reply_id: id,
				// 		},
				// 	})
				// 	console.log("评论结果：" + res)
				// 	if (res.success) {
				// 		this.message == null;
				// 		location.reload();
				// 	} else {
				// 		uni.showToast({
				// 			icon: "none",
				// 			title: "回复失败"
				// 		})
				// 	}
				// }
			},
			// 删除评论
			async delmessage(id) {
				console.log('点击后获取的id:'+id);
				let that = this;
				let token = uni.getStorageSync('student_access_token');
				if (token == "" || token == null) {
					uni.showToast({
						icon: "error",
						title: "请先登录"
					})
				} else {
					const res = await that.$myRequest({
						url: '/api/mobile/schoolstudent/schoolCourseSectionResourceComment?ids='+id,
						method:'DELETE'
					})
					if (res.success) {
						this.message == null;
						location.reload();
					} else {
						uni.showToast({
							icon: "none",
							title: "删除失败"
						})
					}
				}
			
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.comment {
		height: 800rpx;
		width: 100vw;
		background-color: #fff;
		overflow: scroll;
	}

	.comment .comment-num {
		text-align: center;
		color: #c1c6cc;
		height: 40rpx;
		margin-top: 10rpx;
	}

	.comment-item-main {
		margin-bottom: 40rpx;
		
	// 评论下面的分割线
	.comment-item-main-1 {
		margin: 0 20px;
		border-bottom: 1px solid #C0C0C0;
	}
	
	.comment-item {
			display: flex;
			padding: 0 20rpx;

			.left {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;

				.img {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.content {
				flex: 1;
				margin: 0 20rpx;

				.title-name {
					color: #696969;
					font-size: 15px;

					/* display: inline-block; */
					view {
						max-width: 150rpx;
						display: inline-block;
						margin-right: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.content-text {
					/* width: 480rpx; */
					font-size: 16px;
					margin: 20rpx 0;
				}
				// 回复按钮的样式
				.content-btm {
					
					margin-bottom: 20rpx;

					.btm-back {
						margin-left: 40rpx;
						font-size: 14px;
					}
					
				}
			}
		}

		.spread {
			color: #bbbbbb;
			margin-left: 80rpx;
			height: 17px;
			position: relative;

			.down {
				width: 0;
				height: 0;
				position: absolute;
				margin-left: 5px;
				top: 7px;
				border-right: 8px solid transparent;
				border-left: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-top: 8px solid #bbbbbb;
			}

			.up {
				width: 0;
				height: 0;
				position: absolute;
				margin-left: 5px;
				bottom: 4px;
				border-right: 8px solid transparent;
				border-left: 8px solid transparent;
				border-bottom: 8px solid #bbbbbb;
				border-top: 8px solid transparent;
			}
		}
	}
	// 评论时间的字体大小
	.content-btm>text:nth-child(1){
		color: #A9A9A9;
		font-size:14px;
	}
	.msgcolor {
		color: #1E90FF;
	}
	.msgdel {
		color: #FF0000;
	}
	.items {
		margin-left: 80rpx;
	}

	.comment-btm {
		height: 110rpx;
		width: 100%;
		display: flex;
		position: absolute;
		bottom: 0;
		background-color: #fff;
		border-top: 2rpx solid #e0e0e0;

		input {
			height: 80rpx;
			width: 559rpx;
			border-radius: 8rpx;
			background-color: #F5F5F5;
			margin-left: 15rpx;
			margin-top: 15rpx;
			margin-bottom: 15rpx;
			padding-left: 20rpx;
			// margin: 15rpx 15rpx 15rpx;
		}

		.sendmsg {
			border-radius: 8rpx;
			color: #FFFFFF;
			font-size: 36rpx;
			background-color: #00BFFF;
			height: 80rpx;
			width: 130rpx;
			text-align: center;
			// margin-top: 15rpx;
			margin: auto 17rpx;
			line-height: 75rpx;
		}
	}
</style>
